<template>
    <div class="page-footer-container">
        <div class="footer-center">
            <div class="footer-center-section1">
                <div class="footer-center-section1-left">
                    <div class="section1-left1">
                        <div>
                            <i class="el-icon-phone"></i>
                            联系电话： 010-6868088
                        </div>
                        <div>
                            <i class="el-icon-message"></i>
                            官方邮箱： 1032945421@qq.com
                        </div>
                    </div>
                    <div class="section1-left2">
                        <div>
                            <a target="_blank" href="http://www.tyut.edu.cn"
                            >学院官网</a
                            >
                            <a href="">项目管理平台</a>
                        </div>
                    </div>
                </div>
                <div class="footer-center-section1-center">
                    <div class="logo__wrap">
                        软件学院
                    </div>
                </div>
                <div class="footer-center-section1-right">
                    <div>
                        <span>关于我们</span>
                        <span>联系我们</span>
                    </div>
                    <div>
                        <span to="/web/about">加入我们</span>
                        <span to="/web/contact">联系我们</span>
                    </div>
                    <div>
                        <span to="/web/about">意见反馈</span>
                        <span to="/web/contact">联系我们</span>
                    </div>
                </div>
            </div>
            <div class="footer-center-section2">
                Copyright © 2020 信创开源社区 All Rights Reserved · 京ICP备
                1234567891号-11
            </div>
        </div>
    </div>
</template>

<script>

    export default {
        name: 'Footer',

        created(){
        },
        methods: {
            routeToHome() {
                this.$router.push('/home')
            }
        }
    }
</script>

<style lang="scss" scoped>
    @import '../../assets/scss/variable';
    .page-footer-container {
       // background-image: $bgImage;
        margin-top: 20px;
        width: 100%;
        //height: 100px;
        background-color: #ffffff;
        //z-index: 7000;
        .footer-center {
            width: 1200px;
            margin: 0 auto;
            .footer-center-section1 {
                height: 185px;
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
                .footer-center-section1-left {
                    width: 480px;
                    display: flex;
                    flex-direction: row;
                    justify-content: space-between;
                    align-items: center;
                    .section1-left1 {
                        font-size: 13px;
                        height: 17px;
                        line-height: 17px;
                        font-weight: 500;
                        color: #8f9ca0;
                        text-align: center;
                        height: 60px;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;
                        align-items: center;
                    }
                    .section1-left2 {
                        height: 60px;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;
                        align-items: center;
                        div {
                            a {
                                text-decoration:none;
                                display: block;
                                font-size: 13px;
                                height: 17px;
                                line-height: 17px;
                                font-weight: 500;
                                color: #8f9ca0;
                                text-align: center;
                                transition: 0.6s ease;
                                &:hover {
                                    color: red;
                                }
                                &:first-child {
                                    margin-bottom: 26px;
                                }
                            }
                        }
                    }
                }
                .footer-center-section1-center {
                    display: flex;
                    flex-direction: row;
                    justify-content: space-between;
                    align-items: center;

                    .logo__wrap {
                        width: 168px;
                        height: 64px;
                        display: flex;
                        flex-direction: row;
                        justify-content: center;
                        align-items: center;
                        transition: 0.6s ease;

                        position: relative;

                        &:hover {
                            filter: brightness(1.3);
                        }

                    }
                    .abs {
                        position: absolute;
                        top: 0;
                        right: 0;
                        width: 100%;
                        height: 100%;
                        cursor: pointer;
                        opacity: 0;
                    }
                }
                .footer-center-section1-right {
                    display: flex;
                    flex-direction: row;
                    justify-content: space-between;
                    align-items: center;
                    width: 408px;
                    div {
                        span {
                            display: block;
                            font-size: 13px;
                            height: 17px;
                            line-height: 17px;
                            font-weight: 500;
                            color: #8f9ca0;
                            text-align: center;
                            transition: 0.6s ease;
                            &:hover {
                                color: red;
                            }
                            &:first-child {
                                margin-bottom: 26px;
                            }
                        }
                    }
                }
            }
        }
        .footer-center-section2 {
            height: 54px;
            border-top: 1px solid #efefef;
            font-size: 12px;
            color: #8f9ca0;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
        }
    }
</style>
